<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>肖青松个人简历</title>
    <!-- 导入谷歌字体 -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/css/style-starter.css" />
  </head>

  <body>
    <!--begin header begin-->
    <header id="site-header" class="fixed-top">
      <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="#index">
            <i class="fas fa-bold"></i>.
          </a>
          <button
            class="navbar-toggler collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarScroll"
            aria-controls="navbarScroll"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
            <span class="navbar-toggler-icon fa icon-close fa-times"></span>
          </button>

          <!-- begin 头部导航栏 begin -->
          <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav mx-auto my-2 my-lg-0 navbar-nav-scroll">
              <!-- 此处页面的跳转可以对vue中的路由进行参考 -->
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="#home"
                  >主页</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#life_course">人生历程</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#gallery">产品效果图</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#testimonials">我的Jar包</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#services">联系方式</a>
              </li>
            </ul>
          </div>
          <!-- end 头部导航栏 end -->

          <!--begin 切换背景风格 begin-->
          <div class="cont-ser-position">
            <nav class="navigation">
              <div class="theme-switch-wrapper">
                <label class="theme-switch" for="checkbox">
                  <input type="checkbox" id="checkbox" />
                  <div class="mode-container">
                    <!--  光亮-->
                    <i class="gg-sun"></i>
                    <!--  暗淡-->
                    <i class="gg-moon"></i>
                  </div>
                </label>
              </div>
            </nav>
          </div>
          <!--end 切换背景风格 end-->
        </nav>
      </div>
    </header>
    <!-- end header end -->

    <!-- begin 个人信息 begin-->
    <section class="w3l-banner py-5" id="home">
      <div class="container py-md-5 py-3">
        <!-- 个人简历 -->
        <div class="row align-items-center pt-3">
          <div class="col-md-6 banner-left pe-xl-5">
            <h4>Hi, I'm QingSong Xiao</h4>
            <h3 class="mb-6 mt-1">java 开发</h3>
            <!-- 至理名言 -->
            <p class="banner-sub me-md-5">
              <span
                >Coming from a humble background is not a shame. Only by being
                able to bend and stretch can one become a husband</span
              >
            </p>
            <p class="banner-sub me-md-5">
              出身寒微，并非耻辱；能屈能伸，方为丈夫！
            </p>
            <div class="d-flex align-items-center buttons-banner mt-sm-5 mt-4">
              <a href="https://gitee.com/xiao_QingSong/curriculum_vitae" class="btn btn-style me-2">不喜欢？换个简历</a>
            </div>
          </div>
          <div class="col-md-6"></div>
        </div>
        <!-- 个人简历 -->
      </div>

      <!--begin 旋转图标 begin-->
      <div class="icon-effects-w3-1 text-right">
        <img src="assets/images/icon2.png" alt="" class="img-fluid" />
      </div>
      <div class="icon-effects-w3-2 text-right">
        <img src="assets/images/icon3.png" alt="" class="img-fluid" />
      </div>
      <div class="icon-effects-w3-3 text-right">
        <img src="assets/images/icon1.png" alt="" class="img-fluid" />
      </div>
      <div class="icon-effects-w3-4 text-right">
        <img src="assets/images/icon6.png" alt="" class="img-fluid" />
      </div>
      <!--end 旋转图标 end-->
    </section>
    <!-- end 个人信息 end-->



    <!--begin 曾经就任公司logo begin-->
    <section class="w3l-clients pt-2 pb-5" id="clients">
      <div class="container">
        <div class="company-logos text-center">
          <div class="row mx-auto justify-content-center">
            <!-- 采用栅格排版 -->
            <!-- logo展示 -->
            <div class="col-md-4 col-sm-4 col-6">
                我曾经任职公司:
              <img
                src="assets/images/Logo.png"
                alt="元速信息"
                class="img-fluid"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--end 曾经就任公司logo end-->





    <!--begin 人生历程 begin-->
    <section class="w3l-timeline-1 py-5" id="life_course">
      <div class="container py-lg-5 py-4">
        <div class="title-heading-w3 text-center mb-sm-5 mb-4">
          <h3 class="title-style">人生历程</h3>
        </div>
        <!--begin 教育经历 begin-->
        <div class="row">
          <div class="col-lg-6">
            <h5 class="sub-title-timeline">
              <i class="fas fa-graduation-cap"></i> Education
            </h5>
            <div class="timeline">
              <div class="column">
                <div class="title">
                  <h2>长沙学院</h2>
                </div>
                <div class="description">
                  <p>信息与计算科学</p>
                  <h6><i class="fas fa-calendar-alt"></i> 2019-2023</h6>
                </div>
              </div>
            </div>
          </div>
          <!--end 教育经历 end-->


          <!--begin 工作经历 begin-->
          <div class="col-lg-6 mt-lg-0 mt-4">
            <h5 class="sub-title-timeline">
              <i class="fas fa-briefcase"></i> Experience
            </h5>
            <div class="timeline">
              <div class="column">
                <div class="title">
                  <h2>元速信息</h2>
                </div>
                <div class="description">
                  <p>java开发工程师</p>
                  <h6><i class="fas fa-calendar-alt"></i> 2023.7 - 2024.2</h6>
                </div>
              </div>
            </div>
          </div>
          <!--end 工作经历 end-->

        </div>
      </div>
    </section>
    <!--end 人生历程 end-->



    <!--begin 专业技能介绍 begin -->
    <section class="w3l-progress py-5" id="progress">
      <div class="container py-md-5 py-4">
        <div class="title-heading-w3 text-center mb-sm-5 mb-4">
          <h3 class="title-style">我的专业技能</h3>
        </div>
        
        <div class="row py-lg-4">
          <!-- begin java掌握技能 begin -->
          <div class="col-lg-6 pe-lg-5">
              <h3 class="title-style">Java Design</h3>
            <div class="progress-info info1">
              <h6 class="progress-tittle">Mysql数据库<span class="">80%</span></h6>
              <div class="progress">
                <div
                  class="progress-bar progress-bar-striped gradient-1"
                  role="progressbar"
                  style="width: 80%"
                  aria-valuenow="90"
                  aria-valuemin="0"
                  aria-valuemax="100"
                ></div>
              </div>
            </div>
            <div class="progress-info info2">
              <h6 class="progress-tittle">
                Java Frameworks (Java框架)<span class="">95%</span>
              </h6>
              <div class="progress">
                <div
                  class="progress-bar progress-bar-striped gradient-2"
                  role="progressbar"
                  style="width: 95%"
                  aria-valuenow="95"
                  aria-valuemin="0"
                  aria-valuemax="100"
                ></div>
              </div>
            </div>
            <div class="progress-info info3">
              <h6 class="progress-tittle">
                Linux <span class="">60%</span>
              </h6>
              <div class="progress">
                <div
                  class="progress-bar progress-bar-striped gradient-3"
                  role="progressbar"
                  style="width: 60%"
                  aria-valuenow="95"
                  aria-valuemin="0"
                  aria-valuemax="100"
                ></div>
              </div>
            </div>
          </div>
          <!-- end java掌握技能 end -->

          <!--begin Web掌握技能 begin-->
          <div class="col-lg-6 ps-lg-5 mt-lg-0 mt-5">
            <h3 class="title-style">Web Design</h3>
            <div class="progress-info info1">
              <h6 class="progress-tittle">
                Element / ElementPlus <span class="">80%</span>
              </h6>
              <div class="progress">
                <div
                  class="progress-bar progress-bar-striped gradient-1"
                  role="progressbar"
                  style="width: 80%"
                  aria-valuenow="90"
                  aria-valuemin="0"
                  aria-valuemax="100"
                ></div>
              </div>
            </div>
            <div class="progress-info info2">
              <h6 class="progress-tittle">
                Vue2 / Vue3<span class="">95%</span>
              </h6>
              <div class="progress">
                <div
                  class="progress-bar progress-bar-striped gradient-2"
                  role="progressbar"
                  style="width: 95%"
                  aria-valuenow="95"
                  aria-valuemin="0"
                  aria-valuemax="100"
                ></div>
              </div>
            </div>
            <div class="progress-info info4 mb-0">
              <h6 class="progress-tittle">
                 Html<span class="">85%</span>
              </h6>
              <div class="progress">
                <div
                  class="progress-bar progress-bar-striped gradient-4"
                  role="progressbar"
                  style="width: 85%"
                  aria-valuenow="95"
                  aria-valuemin="0"
                  aria-valuemax="100"
                ></div>
              </div>
            </div>
          </div>
          <!--end Web掌握技能 end-->
        </div>
      </div>
    </section>
    <!--end 专业技能介绍  end-->




    <!--begin 项目图片 begin-->
    <section class="w3l-gallery pb-5" id="gallery">
      <div class="container py-md-5 py-4">
        <div class="title-heading-w3 text-center mb-sm-5 mb-4">
          <h3 class="title-style">产品效果图</h3>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-6 item">
            <a
              href="assets/images/project/login_page.png"
              data-lightbox="example-set"
              data-title="项目登录页"
              class="zoom d-block"
            >
              <img
                class="card-img-bottom d-block"
                src="assets/images/project/login_page.png"
                alt="Card image cap"
              />
              <span class="overlay__hover"></span>
              <span class="hover-content">
                <span class="title">项目登录页</span>
                <span class="content"
                  >登录页展示一些基本数据，在登录后将会根据权限分配菜单</span
                >
              </span>
            </a>
          </div>
          <div class="col-lg-4 col-md-6 item mt-md-0 mt-4">
            <a
              href="assets/images/project/home_page.png"
              data-lightbox="example-set"
              data-title="首页"
              class="zoom d-block"
            >
              <img
                class="card-img-bottom d-block"
                src="assets/images/project/home_page.png"
                alt="Card image cap"
              />
              <span class="overlay__hover"></span>
              <span class="hover-content">
                <span class="title">首页</span>
                <span class="content"
                  >登录后根据权限展示菜单  此处展示的是全部模块</span
                >
              </span>
            </a>
          </div>

          <div class="col-lg-4 col-md-6 item mt-lg-0 mt-4">
            <a
              href="assets/images/project/quality_testing.png"
              data-lightbox="example-set"
              data-title="Project 3"
              class="zoom d-block"
            >
              <img
                class="card-img-bottom d-block"
                src="assets/images/project/quality_testing.png"
                alt="Card image cap"
              />
              <span class="overlay__hover"></span>
              <span class="hover-content">
                <span class="title">质量协同</span>
                <span class="content"
                  >具体负责模块中的一个小页面</span
                >
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
    <!--end 项目图片 end-->


    <!--begin 我的jar包 begin-->
    <section class="w3l-testimonials py-5" id="testimonials">
      <div class="container py-md-5 py-4">
        <div class="row">
          <div class="col-md-10 mx-auto">
            <div class="owl-two owl-carousel owl-theme">
                <!-- 下载路径 -->
              <div class="item">
                <div class="slider-info mt-lg-4 mt-3">
                  <div class="message">
                    
                    <p>如果想获取具体Jar包的话,请点击图片即可
                        <br>
                        下载后需要将下载的jar包配置到本地的maven库中
                    </p>
                  </div>
                  <div class="img-circle">
                    
              <a class="nav-link" href="https://gitee.com/xiao_QingSong/generate">
                    <img
                      src="assets/images/myJar/Download_path.png"
                      class="img-fluid radius-image"
                      alt="client"
                    /></a>
                  </div>
                </div>
              </div>


              <!-- 项目结构 -->
              <div class="item">
                <div class="slider-info mt-lg-4 mt-3">
                  <div class="message">
                    <p>
                        项目结构为右侧如图所示  
                        此Jar是根据配置文件使用Jdbc对数据库进行连接随后使用io流生成具体的文件  以达到自动生成的效果
                    </p>
                    <div class="name mt-4 mb-4">
                      <h4>Project Structure</h4>
                    </div>
                  </div>
                  <div class="img-circle">
                    <a class="nav-link" href="https://gitee.com/xiao_QingSong/generate">
                    <img
                      src="assets/images/myJar/project_structure.png"
                      class="img-fluid radius-image"
                      alt="client"
                    /></a>
                  </div>
                </div>
              </div>


              <!-- jar的具体实现 -->
              <div class="item">
                <div class="slider-info mt-lg-4 mt-3">
                  <div class="message">
                    <p>
                      Jar包中的具体实现如右图
                      <br>
                      实现的关键在于使用了Properties文件的读取
                    </p>
                    <div class="name mt-4 mb-4">
                      <h4>Concrete Realization</h4>
                    </div>
                  </div>
                  <div class="img-circle"> <a class="nav-link" href="https://gitee.com/xiao_QingSong/generate">
                    <img
                      src="assets/images/myJar/concrete_realization.png"
                      class="img-fluid radius-image"
                      alt="client"
                    /></a>
                  </div>
                </div>
              </div>

              <!-- jar的使用 -->
              <div class="item ">
                <div class="slider-info mt-lg-4 mt-3">
                  <div class="message">
                    <p>
                        jar的使用
                        <br>
                        使用maven引入后可以直接创建对应的内部类对业务进行调用
                    </p>
                    <div class="name mt-4 mb-4">
                      <h4>Use Jar</h4>
                    </div>
                  </div>
                  <div class="img-circle"> <a class="nav-link" href="https://gitee.com/xiao_QingSong/generate">
                    <img
                      src="assets/images/myJar/use.png"
                      class="img-fluid radius-image"
                      alt="client"
                    /></a>
                  </div>
                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
    </section>
    <!--end 我的jar包 end-->



    <!--begin 联系方式 begin-->
    <section class="w3l-servicesblock1 py-5" id="services">
      <div class="container py-md-5 py-4">
        <div class="title-heading-w3 text-center mb-sm-5 mb-4">
          <h3 class="title-style">我的联系方式</h3>
        </div>
        <div class="w3-services-grids py-lg-4">
          <div class="fea-gd-vv row">
            
            <div class="col-lg-3 col-md-6">
              
            </div>
            <div class="col-lg-3 col-md-6 mt-md-0 mt-4">
                <div class="feature-gd icon-yellow">
                    <div class="icon">
                      <i class="fas fa-laptop"></i>
                    </div>
                    <div class="icon-info">
                      <a href="#url"
                        >Email<br />
                        17763197160@163.com
                      </a>
                    </div>
                  </div>

            </div>
            <div class="col-lg-3 col-md-6 mt-lg-0 mt-md-5 mt-4">
                <div class="feature-gd icon-vilot">
                  <div class="icon">
                    <i class="fas fa-mobile-alt"></i>
                  </div>
                  <div class="icon-info">
                    <a href="#url"
                      >Phone<br />
                      17763197160</a
                    >
                  </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mt-lg-0 mt-md-5 mt-4">
            </div>
          </div>
        </div>

        <div class="text-center mt-5">
          <a href="https://gitee.com/xiao_QingSong/curriculum_vitae" class="btn btn-style">了解更多</a>
        </div>
      </div>
    </section>
    <!--end 联系方式  end-->








    <!-- Js scripts -->
    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
      <span class="fas fa-level-up-alt" aria-hidden="true"></span>
    </button>
    <script>
      window.onscroll = function () {
        scrollFunction();
      };

      function scrollFunction() {
        if (
          document.body.scrollTop > 20 ||
          document.documentElement.scrollTop > 20
        ) {
          document.getElementById("movetop").style.display = "block";
        } else {
          document.getElementById("movetop").style.display = "none";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>
    <!-- //move top -->

    <!-- common jquery plugin -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <!-- //common jquery plugin -->

    <!-- libhtbox -->
    <script src="assets/js/lightbox-plus-jquery.min.js"></script>
    <!-- libhtbox -->

    <!-- testimonials owlcarousel -->
    <script src="assets/js/owl.carousel.js"></script>
    <script>
      $(document).ready(function () {
        $(".owl-two").owlCarousel({
          loop: true,
          margin: 30,
          nav: false,
          responsiveClass: true,
          autoplay: true,
          autoplayTimeout: 5000,
          autoplaySpeed: 1000,
          autoplayHoverPause: false,
          responsive: {
            0: {
              items: 1,
              nav: false,
            },
            480: {
              items: 1,
              nav: false,
            },
            667: {
              items: 1,
              nav: false,
            },
            1000: {
              items: 1,
              nav: false,
            },
          },
        });
      });
    </script>
    <!-- //script for Testimonials-->

    <!-- theme switch js (light and dark)-->
    <script src="assets/js/theme-change.js"></script>
    <!-- //theme switch js (light and dark)-->

    <!-- MENU-JS -->
    <script>
      $(window).on("scroll", function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 80) {
          $("#site-header").addClass("nav-fixed");
        } else {
          $("#site-header").removeClass("nav-fixed");
        }
      });

      //Main navigation Active Class Add Remove
      $(".navbar-toggler").on("click", function () {
        $("header").toggleClass("active");
      });
      $(document).on("ready", function () {
        if ($(window).width() > 991) {
          $("header").removeClass("active");
        }
        $(window).on("resize", function () {
          if ($(window).width() > 991) {
            $("header").removeClass("active");
          }
        });
      });
    </script>
    <!-- //MENU-JS -->

    <!-- disable body scroll which navbar is in active -->
    <script>
      $(function () {
        $(".navbar-toggler").click(function () {
          $("body").toggleClass("noscroll");
        });
      });
    </script>
    <!-- //disable body scroll which navbar is in active -->

    <!-- bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- //bootstrap -->
    <!-- //Js scripts -->
  </body>
</html>
